<template>
	<ul class="distributor">
		<li v-for="(item, index) in info" :key="index" class="flex items-center margin-bottom_10" @click="onClick(item)">
			<view class="avatar" :style="{ width: wh, height: wh }"><image class="img" :src="item[props.avatar ? props.avatar : 'avatar']" mode=""></image></view>
			<view class="">
				<view class="margin-bottom_10 ">
					<text class="name text-overflow align-middle">{{ item[props.name ? props.name : 'name'] }}</text>
					<text class="align-middle" v-if="item[props.phone ? props.phone : 'phone']">
						({{ item[props.phone ? props.phone : 'phone'] | Confidentiality }})
					</text>
				</view>
				<view class="gray">
					<slot>{{ item[props.time ? props.time : 'time'] }}
					      <text v-if="identity==1">成为分销员</text>
					</slot>
				</view>
			</view>
		</li>
	</ul>
</template>

<script>
export default {
	inject: {
		size: {
			type: String,
			default: '130'
		}
	},
	props: {
		infoData: {
			type: [Object, Array],
			default: () => {
				return [];
			}
		},
		cycle: {
			type: Boolean,
			default: false
		},
		size: {
			type: String,
			default: '130'
		},
		props: {
			type: Object,
			default:function(){
				return {}
			}
		},
		'props.avatar':{
			type: String,
			default: 'avatar'
		},
		'props.name':{
			type: String,
			default: 'name'
		},
		'props.phone':{
			type: String,
			default: 'phone'
		},
		'props.time':{
			type: String,
			default: 'time'
		},
		identity:{
			type: Number,
			default: 2 // {1分销员 2 客户}
		}
	},
	filters: {
		Confidentiality(val) {
			console.log('Confidentiality',val)
			if (!val){
				return ''
			}else {
				var reg = /(\d{3})\d{4}(\d{4})/;
				var tel = val.replace(reg, '$1****$2');
				return tel;
			}
		}
	},
	mounted() {
		console.log('this.props',this.infoData);
	},
	computed: {
		wh() {
			let size = Number(this.size);
			size = isNaN(size) ? 100 : size;
			console.log(size);
			return `${size}rpx`;
		},
		info() {
			if (this.infoData instanceof Array) {
				return this.infoData;
			} else {
				return [this.infoData];
			}
		}
	},
	methods: {
		onClick(item) {
			this.$emit('send', item);
		}
	},
	data() {
		return {};
	}
};
</script>

<style lang="less" scoped>
.distributor {
	// box-sizing: border-box;
	// padding: 15rpx 35rpx;
	.avatar {
		margin-right: 15rpx;
		font-size: 28rpx;
		.img {
			border-radius: 50%;
		}
	}
	.name {
		display: inline-block;
		max-width: 200rpx;
	}
	.gray {
		font-size: 26rpx;
	}
}
</style>
